<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
        }
        .myHeader{
            width: 100%;
            height: 100px;
            background:rgb(179,192,209);
        }
        .myFooter{
            width: 100%;
            height: 100px;
            background:rgb(179,192,209);
        }
        .my-content{
            display: flex;
            width: 100%;
            flex: 1;
        }
        .myAside{
            width: 300px;
            height: 100%;
            background:rgb(211, 220, 230)
        }
        .myMain{
            flex: 1;
            height: 100%;
            background:rgb(233, 238, 243);
        }
        .menu-list{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .menu-list li{
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding-left: 30px;
            box-sizing: border-box;
        }
        .menu-list li.active{
            color: #409EFF;
        }
    </style>
</head>
<body>
    <div id="app">
        <my-header></my-header>
        <div class="my-content">
            <my-aside @to-parent="getAsideValue"></my-aside>
            <!-- 第三步，父组件将获取到的唯一标识，传到main组件中 -->
            <my-main :type="parentCurrentType"></my-main>
        </div>
        <my-footer></my-footer>
    </div>

    <script src="js/vue.js"></script>
    <script>
        //子组件向父组件传递参数
        let myApp = new Vue({
            el:'#app',
            data:{
                parentCurrentType:''
            },
            methods:{
                //父组件接收参数并保存
                getAsideValue(data){
                    console.log(data);
                    this.parentCurrentType = data
                }
            },
            components:{
                myHeader:{
                    template:`
                        <div class="myHeader">header</div>
                    `
                },
                myAside:{
                    template:`
                        <div class="myAside">
                            <ul class="menu-list">
                                <li
                                    v-for="item in list"
                                    :class="{active:currentType === item.value}"
                                    @click="itemClick(item)">
                                      {{item.label}}      
                                </li>
                            </ul>
                        </div>
                    `,
                    data(){
                        return{
                            currentType:'',
                            list:[
                                {label:'用户管理',value:'user'},
                                {label:'配置管理',value:'sys'},
                                {label:'角色管理',value:'role'},
                                {label:'定时管理',value:'task'}
                            ]
                        }
                    },
                    methods:{
                        itemClick(item){
                            //第一步aside组件触发事件并且传参数到父组件
                            this.currentType = item.value

                            this.$emit('to-parent',this.currentType)
                        }
                    }
                },
                myMain:{
                    props:{
                        type:{
                            type:String
                        }
                    },
                    //第四步，用父组件传过来的唯一标识，进行动态判断
                    template:`
                        <div class="myMain">
                            <div v-show="currentType === 'user' ">用户管理</div>
                            <div v-show="currentType === 'sys' ">配置管理</div>    
                            <div v-show="currentType === 'role' ">角色管理</div>    
                            <div v-show="currentType === 'task' ">定时管理</div>    
                        </div>
                    `,
                    data(){
                        return {
                            //currentType:''
                        }
                    },
                    computed:{
                        currentType(){
                            return this.type
                        }
                    }
                     // watch: {
                    //     type (newValue) {
                    //         console.log('123122112', newValue)
                    //         this.currentType = newValue
                    //     }
                    // }
                },
                myFooter:{
                    template:`
                        <div class="myFooter">footer</div>
                    `
                }
             }
         })
    </script>
</body>
</html>